<template>
  <fy-table
    :table-data="tableData"
    :columns="columns"
    title="自定义样式表格"
    :row-class="getRowClass"
  >
    <template #body-cell-status="props">
      <q-td :props="props">
        <q-chip :color="getStatusColor(props.value)" text-color="white" size="sm">
          {{ props.value }}
        </q-chip>
      </q-td>
    </template>
  </fy-table>
</template>

<script setup>
import { ref } from 'vue'
import FyTable from 'components/common/FyTable/index.vue'

const tableData = ref([
  { id: 1, name: '任务A', deadline: '2024-03-20', status: '进行中', progress: 30 },
  { id: 2, name: '任务B', deadline: '2024-03-15', status: '已完成', progress: 100 },
  { id: 3, name: '任务C', deadline: '2024-03-10', status: '已逾期', progress: 60 },
  { id: 4, name: '任务D', deadline: '2024-03-25', status: '未开始', progress: 0 },
])

const columns = [
  {
    name: 'name',
    label: '任务名称',
    field: 'name',
    align: 'left',
  },
  {
    name: 'deadline',
    label: '截止日期',
    field: 'deadline',
    align: 'center',
  },
  {
    name: 'status',
    label: '状态',
    field: 'status',
    align: 'center',
  },
  {
    name: 'progress',
    label: '进度',
    field: 'progress',
    align: 'center',
  },
]

const getStatusColor = (status) => {
  const colors = {
    进行中: 'primary',
    已完成: 'positive',
    已逾期: 'negative',
    未开始: 'grey',
  }
  return colors[status] || 'grey'
}

const getRowClass = (row) => {
  if (row.status === '已逾期') return 'bg-red-1'
  if (row.status === '已完成') return 'bg-green-1'
  return ''
}
</script>

<style lang="scss" scoped>
.bg-red-1 {
  background-color: rgba(255, 0, 0, 0.1);
}

.bg-green-1 {
  background-color: rgba(0, 255, 0, 0.1);
}
</style>
